<template>
    <div class="carlist">
        <ul>
            <li v-for="(item,i) in carList" :key="i">
                {{item.shopdata.name}}
                <span :class="{
                    checkbox:true,
                    active:item.flag
                }" @click="checkitem(item.id)"></span>
                <dl>
                    <dt>
                        <img src="" alt="">
                    </dt>
                    <dd>
                        <header>
                            <h3>{{item.shopdata.title}}</h3>
                        </header>
                        <footer>
                            <p>
                                <b>￥<span>{{item.shopdata.price}}</span></b>
                                <s>￥{{item.shopdata.old_price}}</s>
                            </p>
                            <my-shopCount
                                :count="item.count"
                                :shopid="item.shopdata.id"
                            ></my-shopCount>
                        </footer>
                    </dd>
                </dl>
            </li>
        </ul>
    </div>
</template>

<script>
import {mapActions,mapState,mapMutations} from 'vuex';
export default {
    data(){
        return {

        }
    },
    computed:{
        ...mapState('shopCar',['carList'])
    },
    methods:{
        ...mapActions('shopCar',['getCarList']),
        ...mapMutations('shopCar',['CHANGE_CHECK']),
        checkitem(id){
            this.CHANGE_CHECK(id);
        }
    },
    created(){
        this.getCarList();
    }
}
</script>

<style lang="scss" scoped>
    .carlist{
        width:100%;
        flex:1;
    }
    .checkbox{
        display: inline-block;
        width: 20px;
        height: 20px;
        border:1px solid #000;
    }
    .checkbox.active{
        background: red;
    }
</style>
